<template>
	<div v-loading="state.loading" class="layout-padding form-box" style="background: #fff">
		<div v-if="props.type !== 'approval'" class="header-code">
			{{ state.infoData.inboundOrderCode }}
			<el-tag :type="tagTypes[state.infoData.statusCode || 1]" effect="dark">
				<span v-for="item in state.inDelOrderStatus" :key="item.id" v-show="Number(item.value) === (state.infoData.statusCode || 1)">
					{{ item.label }}
				</span>
			</el-tag>
			<el-icon v-if="(state.infoData.statusCode === 1 || state.infoData.statusCode === 3) && getAuth('wms_inbound_edit')" color="#409EFF">
				<Edit @click="toEdit" />
			</el-icon>
		</div>
		<!-- 进度条 -->
		<StepsStatus :stepsList="state.infoData.statusNodeList" />
		<div class="info-box">
			<!-- 基本信息 -->
			<div class="detail-info">
				<div class="info-tab-title">基本信息</div>
				<el-form :model="state.infoData" label-width="100px">
					<el-row>
						<el-col :sm="12" :md="8" :lg="6">
							<el-form-item label="公司主体:" prop="">{{ state.infoData.companyName }}</el-form-item>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<el-form-item label="团队:" prop="">{{ state.infoData.teamName }}</el-form-item>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<el-form-item label="入库类型:" prop="">
								<template v-for="item in inbound_bus_type">
									{{ item.value === state.infoData.busType ? item.label : '' }}
								</template>
							</el-form-item>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<el-form-item label="入库仓库:" prop="whNameFrom">{{ state.infoData.whNameTo }}</el-form-item>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<el-form-item label="备货区域:" prop="">{{ state.infoData.stockupAreaName }}</el-form-item>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<el-form-item label="入库日期:" prop="">{{ state.infoData.inTimestamp }}</el-form-item>
						</el-col>

						<el-col :sm="12" :md="8" :lg="6">
							<el-form-item label="物流跟踪号:" prop="">{{ state.infoData.logisticsTraceCode }}</el-form-item>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<el-form-item label="备注:" prop="">{{ state.infoData.remarks }}</el-form-item>
						</el-col>
						<el-col :sm="12" :md="16" :lg="18">
							<el-form-item label="附件:" prop="">
								<UploadFile
									v-if="state.infoData.attachmentList?.length"
									:modelValue="state.infoData.attachmentList"
									:showFileList="true"
									position="flex"
									type="simple"
									class="view-file"
								>
									<template #uploadText>
										<div class="hidden"></div>
									</template>
								</UploadFile>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<br />
			<!-- 产品 -->
			<el-tabs>
				<el-tab-pane label="入库产品" name="0">
					<el-table :header-cell-style="{ color: '#000', background: '#F5F7FA' }" :data="state.infoData.itemList">
						<el-table-column type="index" width="80" align="center" label="序号">
							<template v-slot="scope">
								<span>{{ scope.$index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column label="图片" prop="" min-width="80px">
							<template v-slot="scope">
								<div class="list-image">
									<ewt-image :url="scope.row.picUrl" style="width: 36px; height: 36px; object-fit: contain; display: block; cursor: pointer" />
									<div class="tag-combination" v-if="scope.row.skuType === '2'">组</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="产品名称/SKU" prop="" min-width="160px">
							<template v-slot="scope">
								<div>{{ scope.row.skuName || '--' }}</div>
								<div>{{ scope.row.sku || '--' }}</div>
							</template>
						</el-table-column>
						<el-table-column label="备货平台" prop="stockupPlatformName" min-width="120px"></el-table-column>
						<el-table-column label="FNSKU" prop="fnsku" min-width="120px"> </el-table-column>
						<el-table-column label="应收货量(pcs)" prop="supposeReceiveQty" min-width="120px"> </el-table-column>
						<el-table-column label="明细备注" prop="remarks" min-width="150px"> </el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane v-if="state.infoData.statusCode === 7" label="到货信息" name="1">
					<el-table :header-cell-style="{ color: '#000', background: '#F5F7FA' }" :data="state.infoData.itemList">
						<el-table-column type="index" width="80" align="center" label="序号">
							<template v-slot="scope">
								<span>{{ scope.$index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column label="图片" prop="" min-width="80px">
							<template v-slot="scope">
								<ewt-image :url="scope.row.picUrl" style="width: 36px; height: 36px; object-fit: contain; display: block; cursor: pointer" />
								<!-- <div v-else class="non-pic">无图</div> -->
							</template>
						</el-table-column>
						<el-table-column label="产品名称/SKU" prop="" min-width="160px">
							<template v-slot="scope">
								<div>{{ scope.row.skuName || '--' }}</div>
								<div>{{ scope.row.skuCode || '--' }}</div>
							</template>
						</el-table-column>
						<el-table-column label="备货平台" prop="stockupPlatformName" min-width="120px"></el-table-column>
						<el-table-column label="FNSKU" prop="fnsku" min-width="120px"> </el-table-column>
						<el-table-column label="应收货量(pcs)" prop="supposeReceiveQty" min-width="150px"> </el-table-column>
						<el-table-column label="已收货量(￥)" prop="receivedQtyTotal" min-width="150px"> </el-table-column>
						<el-table-column label="是否赠品" prop="" min-width="120px">
							<template v-slot="scope">
								<div v-for="(item, ind) in scope.row.productItemList" :key="item.id">
									{{ item.giftFlag === '0' ? '是' : item.giftFlag === '1' ? '否' : '' }}
								</div>
							</template>
						</el-table-column>
						<el-table-column label="采购单价(￥)" prop="purchaseCost" min-width="120px">
							<template v-slot="scope">
								<div v-for="(item, ind) in scope.row.productItemList" :key="item.id">
									{{ item.purchaseCost }}
								</div>
							</template>
						</el-table-column>
						<el-table-column label="本次到库成本(￥)" prop="inventoryCost" min-width="150px">
							<template v-slot="scope">
								<div v-for="(item, ind) in scope.row.productItemList" :key="item.id">
									{{ item.inventoryCost }}
								</div>
							</template>
						</el-table-column>

						<el-table-column label="入库产品质量(￥)" prop="" min-width="150px">
							<template v-slot="scope">
								<div v-for="(item, ind) in scope.row.productItemList" :key="item.id">
									{{ item.qualityType === '1' ? '良品' : item.qualityType === '2' ? '次品' : item.qualityType === '3' ? '废品' : '' }}
								</div>
							</template>
						</el-table-column>
						<el-table-column label="入库库位" prop="" min-width="180px">
							<template v-slot="scope">
								<div v-for="(item, ind) in scope.row.productItemList" :key="item.id">
									{{ item.positionCode }}
								</div>
							</template>
						</el-table-column>
						<el-table-column label="入库数量" prop="" min-width="140px">
							<template v-slot="scope">
								<div v-for="(item, ind) in scope.row.productItemList" :key="item.id">
									{{ item.inboundQty }}
								</div>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="操作记录" name="2">
					<!-- <detailLogList :id="state.id" /> -->
					<OperateLog
						v-if="state.id"
						:info-data="{
							busId: state.id,
						}"
					/>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script lang="ts" setup name="detailInfo">
import { auth } from '/@/utils/authFunction';
const getAuth = (value: string) => {
	return auth(value);
};
import { ElMessage } from 'element-plus';

import { useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { useDict } from '/@/hooks/dict';
const { inbound_bus_type } = useDict('inbound_bus_type');
import { inboundOrderDetail, getDicts } from './api.ts';
const tagTypes = ['', 'info', '', 'danger', 'warning', 'warning', 'success', 'info', 'info'];
const props = defineProps({
	type: {
		type: String,
		default: '',
	},
});

const state = reactive({
	id: '',
	infoData: {},
	loading: false,
	inDelOrderStatus: [],
	pageLog: [],
});

onMounted(async () => {
	state.id = route.query.id;
	if (state.id) {
		getDetail();

		const { data } = await getDicts('inbound_status');
		state.inDelOrderStatus = data;
	}
	// else {
	// 	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...useRoutes }));
	// }
});

// 获取详情
const getDetail = async () => {
	try {
		state.loading = true;
		const { data } = await inboundOrderDetail(state.id);
		state.infoData = JSON.parse(JSON.stringify(data));
		state.infoData.statusNodeList.forEach((item, index) => {
			item.nodeStatus = item.currentNodeFlag ? '1' : state.infoData.statusNodeList[index - 1].currentNodeFlag && !item.currentNodeFlag ? '2' : '3';
			item.statusName = item.node;
			item.changeTime = item.nodeDate;
		});
		state.infoData.allPositionList = [];
		state.loading = false;
	} catch (error) {
		ElMessage({
			message: error.msg,
			type: 'error',
		});
	}
};
// 编辑
const toEdit = () => {
	router.push({ path: '/warehouse/inboundDelivery/inboundDeliveryOrder/addInDelivery', query: { tagsViewName: '编辑入库单', id: state.id } });
};
const { infoData } = toRefs(state);
defineExpose({
	infoData,
});
</script>

<style lang="scss" scoped>
@import '/@/assets/styles/variables.module.scss';
.header-code {
	color: #000;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid #e9e9eb;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
}
.info-tab-title {
	position: relative;
	height: 24px;
	font-size: 14px;
	line-height: 24px;
	font-weight: 600;
	color: #0b1019;
	padding-left: 10px;
	margin-bottom: 20px;
	display: flex;
	&:before {
		content: ' ';
		display: inline-block;
		position: absolute;
		top: 5px;
		left: 0;
		height: 14px;
		width: 2px;
		background: #005bf5;
	}
}
.info-box {
	height: calc(100% - 50px);
	overflow: auto;
}
:deep(.el-upload-list__item-status-label),
:deep(.el-icon--close),
:deep(.el-upload),
:deep(.el-upload__tip) {
	display: none !important;
}
:deep(.el-upload-list) {
	margin-top: 0px !important;
}
.el-col {
	margin-bottom: 20px;
}

.el-form-item {
	word-break: break-all;
}
.non-pic {
	background: rgba(11, 16, 25, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.03);
	color: rgba(11, 16, 25, 0.12);
	border-radius: 2px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
}
</style>